<template>
    <div v-show="show" class="xaDialog">
        <div class="xaLayer" v-show="shade"></div>

        <div ref="popup" class="xaPopup">
            <div ref="title" class="xaTitleRoom">
                <div class="xaTitle"><span class="titleIco"></span> <span class="titleText">{{ title }}</span></div>
                <div class="xaReset" v-show="ismin" @click="reset()"></div>
                <div class="xaMin" v-show="!ismin" @click="min()"></div>
                <div class="xaClose" @click="close()"></div>
            </div>
            <div ref="main" class="xaMain">
                <div v-if="show">
                    <component v-bind:is="content" :data="data"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var drag = (dragBox, moveBox = dragBox) => {
        dragBox.onmousedown = e => {
            var disX = e.clientX - moveBox.offsetLeft;
            var disY = e.clientY - moveBox.offsetTop;
            document.onmousemove = e => {
                e.preventDefault();
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                var x = document.documentElement.clientWidth - moveBox.offsetWidth;
                var y = document.documentElement.clientHeight - moveBox.offsetHeight;
                l = l < 0 ? 0 : l > x ? x : l;
                t = t < 0 ? 0 : t > y ? y : t;
                moveBox.style.left = l + "px";
                moveBox.style.top = t + "px";
                return false;
            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
                return false;
            };
            return false;
        };
    };
    export default {
        methods: {
            // 弹框适配屏幕居中
            autosize() {
                this.$nextTick(() => {
                    var dom = this.$refs.popup;
                    var CHeight = document.documentElement.clientHeight;
                    var CWidth = document.documentElement.clientWidth;
                    this.area.height && (dom.style.height = this.area.height);
                    this.area.width && (dom.style.width = this.area.width);

                    var PHeight = dom.offsetHeight;
                    var PWidth = dom.offsetWidth;

                    if (!this.location) {
                        this.$refs.main.style.maxHeight = CHeight - 100 + "px";
                        dom.style.top =
                            (CHeight > PHeight ? (CHeight - PHeight) / 2 : 0) + "px";
                        dom.style.left = (CWidth - PWidth) / 2 + "px";
                    }
                    else {
                        this.location.top && (dom.style.top = this.location.top);
                        this.location.left && (dom.style.left = this.location.left);
                        this.location.right && (dom.style.right = this.location.right);
                        this.location.bottom && (dom.style.bottom = this.location.bottom);
                    }
                });
            },
            min() {
                this.default_style = this.clone(this.$refs.popup.style);
                var mincount = this.$store.dialogNum;

                var win_width = document.documentElement.clientWidth;
                var max_row = Math.floor(win_width / 310);
                var row = Math.floor(mincount / max_row);

                this.$refs.popup.style.top = "auto";
                this.$refs.popup.style.bottom = row * 40 + "px";
                this.$refs.popup.style.left =
                    10 + (mincount - row * max_row) * 310 + "px";
                this.$refs.popup.style.width = "300px";
                this.$refs.popup.style.height = "35px";
                this.ismin = true;
                this.$store.dialogNum++;
            },
            reset() {
                this.$refs.popup.style = this.default_style;
                this.autosize();
                this.ismin = false;
                this.$store.dialogNum--;
            },
            close() {
                if (this.ismin) {
                    this.$store.dialogNum--;
                }
                this.ismin = false;
                this.$refs.popup.style = this.default_style;
                this.autosize();
                this.$emit("input", false);
                if (typeof this.cancel == "function") {
                    this.cancel();
                }
                
            },
            clone(origin) {
                let originProto = Object.getPrototypeOf(origin);
                return Object.assign(Object.create(originProto), origin);
            }
        },
        data() {
            return {
                default_style: undefined,
                ismin: false
            };
        },
        props: {
            title: {
                default: ""
            },
            value: {
                type: Boolean,
                default: false
            },
            shade: {
                type: Boolean,
                default: true
            },
            cancel: {
                type: Function,
                default: null
            },
            location: {
                type: Object,
                default() {
                    return {
                        top: undefined,
                        left: undefined,
                        bottom: undefined,
                        right: undefined
                    };
                }
            },
            area: {
                type: Object,
                default() {
                    return {
                        height: undefined,
                        width: undefined
                    };
                }
            },
            content: {
                type: Object,
                default() {
                    return undefined;
                }
            },
            data: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        computed: {
            show() {
                return this.value;
            }
        },
        watch: {
            show(val) {
                val && this.autosize();
            },
        },
        mounted() {
            this.$nextTick(() => {
                drag(this.$refs.title, this.$refs.popup);
            });
            this.autosize();
        },
        destroyed() {
        }
    };
</script>

<style lang="scss">
    .xaDialog {
        .xaLayer {
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            z-index: 100;
        }

        .xaPopup {
            z-index: 101;
            position: fixed;
            overflow: hidden;
            background-color: burlywood;
            background: url(../../assets/menuAndDialog/弹出框背景.png) no-repeat;
            background-size: 100% 100%;
            padding: 16px 20px;
        }

        .xaTitleRoom {
            width: 100%;
            /* height: 32px; */
            color: #2bfaff;
            /* line-height: 28px; */
            text-align: center;
            font-size: 15px;
            cursor: move;
            position: relative;
            margin-top: 10px;
           .titleIco{
               background: url(../../assets/menuAndDialog/标题.png) no-repeat;
               background-size: 100% 100%;
               display: inline-block;
               width: 2rem;
               height: 1.2rem;
               margin-right: 1rem;
           }
            .titleText{
                color: #fff;
                font-size: 1.6rem;
            }
            .xaReset {
                height: 28px;
                width: 24px;
                position: absolute;
                right: 44px;
                top: 0px;
                cursor: pointer;
                font-size: 1.5rem;
            }

            .xaReset:after {
                content: "❐";
                display: block;
            }

            .xaReset:hover {
                background: rgba(255, 255, 255, 0.1);
            }

            .xaMin {
                height: 28px;
                width: 24px;
                position: absolute;
                right: 44px;
                top: 0px;
                cursor: pointer;
                font-size: 2rem;
            }

            .xaMin:after {
                content: "-";
                display: block;
            }

            .xaMin:hover {
                background: rgba(255, 255, 255, 0.1);
            }

            .xaClose {
                height: 28px;
                width: 24px;
                position: absolute;
                right: 20px;
                top: 0px;
                cursor: pointer;
                font-size: 2rem;
            }

            .xaClose:after {
                content: "×";
                display: block;
            }

            .xaClose:hover {
                background: rgba(255, 255, 255, 0.1);
            }
        }

        .xaMain {
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 15px;
            width: auto;
        }
    }
</style>
